import Sty from "../../style/publish/index.module.css";
import { NavBar} from 'antd-mobile'
import { useHistory } from "react-router";

export default () => {
  let history=useHistory()
  const back = () => history.goBack()
  const publishData = [{ id: 1, title: '手机数码', type:'手机数码', img_src: require("../../images/phone.png").default }, { id: 2, title: '家用电器',type:'家用电器', img_src: require("../../images/dq.png").default }, {
    id: 3, title: '女装',type:'女装', img_src: require("../../images/nz.png").default
  },
    {
      id: 4, title: '生活百货', type:'生活百货',img_src: require("../../images/sh.png").default
    },
    {
      id: 5, title: '运动户外',type:'运动户外', img_src: require("../../images/yd.png").default
    },
    {
      id: 6, title: '乐器',type:'乐器', img_src: require("../../images/yq.png").default
    },
     {
      id: 7, title: '美妆',type:'美妆', img_src: require("../../images/mz.png").default
    },
         {
    id: 8, title: '家具/饰品',type:'家具饰品', img_src: require("../../images/jj.png").default}
  ]
  const publishDataMap = () => {
    return publishData.map((item, index) => {
      return <li className={Sty.publish_li} key={item.id} onClick={()=>history.push({pathname:"/publishsubmit",state:publishData[index].type})}>
        <img src={item.img_src} alt="" />
        <p>{ item.title}</p>
      </li>
    })
  }

  return <>
    <div className={Sty.top}>
       <NavBar onBack={back}>发布闲置</NavBar>
    </div>
    <div className={Sty.publish_list}>
      <h2>请选择您要售卖的宝贝分类</h2>
      <ul>
        {publishData.length>0?publishDataMap():[]}

      </ul>
    </div>
   
  </>
}